<!--
 * @Author: yuanming
 * @Date: 2024-06-30 08:01:12
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-11 15:30:54
 * @Description: fileDescription
-->
<template>
    <div class="menuWarp">
        <div v-for="(item, index) in menuList" :key="item" :class="['menuItem', index === propsData.current ? 'checked' : '']" @click="change(index)">{{ item }}</div>
    </div>
</template>
<script setup>
const emit = defineEmits(['change'])
const menuList = ref(['数据监管', '公共备案停车场监管', '共享单车监管'])
const propsData = defineProps({
    current: {
        type: Number,
        default: 0,
    },
})
const change = (index) => {
    emit('change', index)
}
</script>

<style lang="scss" scoped>
.menuWarp {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 3vh;
    transform: translateX(1vw);
    z-index: 150;
    position: absolute;
    top: 7vh;
    left: 0;
    .menuItem {
        width: fit-content;
        height: fit-content;
        cursor: pointer;
        margin: 0 1vw;
        font-size: 1vw;
        font-weight: 600;
        z-index: 100;
        position: relative;
    }
    .menuItem.checked {
        color: #ffda00;
        transition: 0.5s;
    }
    .menuItem.checked::before {
        content: '';
        width: 8vw;
        height: 10vh;
        position: absolute;
        top: -6vh;
        left: calc(50% - 4vw);
        background-image: url('@/assets/images/menuChecked.png');
        background-size: contain;
        background-repeat: no-repeat;
        z-index: -1;
    }
}
</style>
